<template>
  <div class="movieList">
    <div class="title">
      <div class="title-1">{{movietitle}}({{movies.length}})部</div>
      <div>{{msg}}</div>
      <div>查询更多</div>

    </div>
    <div class="content">

      <MovieItem
        v-for="item in movies" 
        :key="item.id"
        :coverpath="item.imgSrc"
        :title="item.title"
        :score="item.score"
        @make="getTicketMsg"
      />

      
    </div>
  </div>
</template>

<script>
import MovieItem from "@/components/movies/MovieItem.vue";
export default {
  data(){
    return{
      msg:''
    }
  },
  components: {
    MovieItem,
  },
  props:['movies','movietitle'],
  methods:{
    getTicketMsg(msg){
      this.msg=msg
    }
  }
};
</script>

<style lang="scss">
.movieList {
  display: flex;
  flex-wrap: wrap;
  width: 750px;
  height: 616px;
  .title {
    display: flex;
    width: 750px;
    height: 70px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    .title-1 {
      font-size: 24px;
      color: orange;
    }
  }
  .content {
    display: flex;
    width: 100%;
    flex: 1;
    flex-wrap: wrap;
  }
}
</style>